<template>
  <el-dialog title="选择课程分类" :visible.sync="isShow" @close="close">
    <el-tree :data="data" :props="defaultProps" @node-click="checkNode"></el-tree>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">{{$t('action.cancel')}}</el-button>
      <el-button type="primary" @click="close(returnData)">{{$t('action.comfirm')}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: "ChooseCourseCate",
    data() {
      return {
        isShow:true,
        defaultProps: {
          children: 'children',
          label: 'name',
          id: 'id',
        },
        data: [],
        returnData: {}
      }
    },
    created() {
      this.getTree()
    },
    methods: {
      getTree() {
        this.$api.course.getCourseCateTree().then(
          res => {
            console.log(res)
            this.data = res.data;
          }
        )
      },
      checkNode(data) {
        this.returnData = {
          id: data.id,
          name: data.name,
        }
      },
      close(data) {
        this.$emit("closePop", data)
      },
    },
  }
</script>

<style scoped>

</style>
